<template>
  <div class="bf-commont-template padding-t">
    <el-tabs v-model="activeName" :tab-position="tabPosition"  @tab-click="toggleTab">
      <el-tab-pane label="fas 字体图标" name="fas">
        <div class="icon-item margin-t clearfix" v-for="item in showIcon">
          <div class="icon">
            <i :class="item.name"></i>
          </div>
          <div class="title">
            <span>{{item.name}}</span>
          </div>
          <div class="font-s copy" @click="copy(item.name)">复制</div>
        </div>
        <div class="clearfix loading-more padding-t padding-b color" @click="loadingMoreFas">加载更多</div>
      </el-tab-pane>
      <el-tab-pane label="fab 字体图标" name="fab">
        <div class="icon-item margin-t clearfix" v-for="item in showIcon">
          <div class="icon">
            <i :class="item.name"></i>
          </div>
          <div class="title">
            <span>{{item.name}}</span>
          </div>
          <div class="font-s copy" @click="copy(item.name)">复制</div>
        </div>
        <div class="clearfix loading-more padding-t padding-b color" @click="loadingMoreFab">加载更多</div>
      </el-tab-pane>
      <el-tab-pane label="far 字体图标" name="far">
        <div class="icon-item margin-t clearfix" v-for="item in showIcon">
          <div class="icon">
            <i :class="item.name"></i>
          </div>
          <div class="title">
            <span>{{item.name}}</span>
          </div>
          <div class="font-s copy" @click="copy(item.name)">复制</div>
        </div>
        <div class="clearfix loading-more padding-t padding-b color" @click="loadingMoreFar">加载更多</div>
      </el-tab-pane>
    </el-tabs>
    <input v-model="copyValue" type="text" value="https://blog.csdn.net/Tomhs3000" id="copy-content">
  </div>
</template>

<script>
import fabJson from '../../../../static/fontawesome-free-5.1.0-web/json/fab.json'
import fasJson from '../../../../static/fontawesome-free-5.1.0-web/json/fas.json'
import farJson from '../../../../static/fontawesome-free-5.1.0-web/json/far.json'
export default {
  data() {
    return {
      page: 1,
      pageSize: 100,
      activeName: 'fas',
      tabPosition: 'left',
      fasJson: fasJson,
      fabJson: fabJson,
      farJson: farJson,
      showIcon: [],
      copyValue: ''
    }
  },
  mounted: function() {
    // console.log(fasJson)
    this.showIcon = fasJson.slice(0, this.pageSize)
  },
  methods: {
    toggleTab(tab) {
      this.page = 1
      if (tab.name === 'far') {
        this.showIcon = farJson.slice(0, this.page * this.pageSize)
      } else if (tab.name === 'fas') {
        this.showIcon = fasJson.slice(0, this.page * this.pageSize)
      } else if (tab.name === 'fab') {
        this.showIcon = fabJson.slice(0, this.page * this.pageSize)
      }
    },
    loadingMoreFas() {
      this.page = this.page + 1
      if (this.page * this.pageSize > fasJson.length) {
        this.$message({
          message: '以上为所有 fas 图标',
          type: 'error'
        })
        return false
      }
      this.showIcon = fasJson.slice(0, this.page * this.pageSize)
    },
    loadingMoreFar() {
      this.page = this.page + 1
      if (this.page * this.pageSize > farJson.length) {
        this.$message({
          message: '以上为所有 far 图标',
          type: 'error'
        })
        return false
      }
      this.showIcon = farJson.slice(0, this.page * this.pageSize)
    },
    loadingMoreFab() {
      this.page = this.page + 1
      if (this.page * this.pageSize > fabJson.length) {
        this.$message({
          message: '以上为所有 fab 图标',
          type: 'error'
        })
        return false
      }
      this.showIcon = fabJson.slice(0, this.page * this.pageSize)
    },
    copy(name) {
      this.copyValue = name
      setTimeout(() => {
        document.querySelector('#copy-content').select()
        document.execCommand('Copy')
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      }, 100)
    }
  }
}
</script>

<style scoped>
.icon-item{
  width: 12.5%;
  float: left;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
}
.icon-item:hover{
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03);
  background: #eff5fb;
}
.icon{
  padding: 16px 0;
  font-size: 18px;
  color: #0099ff;
}
.icon:hover{
  background: #0099ff;
  color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.title{
  padding: 8px 0;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #858585;
}
.copy{
  padding: 4px 0;
  visibility: hidden;
  color: rgba(0,0,0,0.1);
  cursor: pointer;
  border: 1px solid transparent;
}
.copy:hover{
  color: #0099ff;
}
.icon-item:hover .copy{
  visibility: inherit;

}
.loading-more{
  float: left;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.loading-more:hover{
  background: #eff5fb;
}
#copy-content{
  opacity: 0;
}
</style>
